// ---------------------------- 获取所有的分类，渲染到页面中 -------------------------
function renderCategory() {
  // 发送ajax请求，获取分类 -> 通过模板引擎渲染到页面中
  $.ajax({
    url: '/my/category/list',
    success: function (res) {
      if (res.status === 0) {
        console.log(res);
        // 使用模板引擎，渲染到页面中
        // let 完整的HTML结构 = template('模板id', '数据');
        let htmlStr = template('tpl-list', res);
        // 最终，要把完整的html结构放到 tbody 里
        $('tbody').html(htmlStr);
      }
    }
  });
}
renderCategory();


// ----------------------------    删除分类      -------------------------
// 注册单击事件 --> 询问是否删除 --> 调用接口完成删除
$('tbody').on('click', 'button:contains("删除")', function () {
  // console.log($(this));
  // 获取事件源的data-id属性值，这个值就是分类的id
  // let id = $(this).attr('data-id');
  let id = $(this).data('id'); // jQuery中的data方法，专门用于获取 data-xxx 属性值
  // console.log(id);
  // return;
  // 询问
  layer.confirm('你确定不要我了吗？', function (index) {
    // 按照接口文档，来发送ajax请求，完成删除
    $.ajax({
      url: '/my/category/delete',
      data: { id: id },
      success: function (res) {
        // 无论成功失败，都提示一下
        layer.msg(res.message);
        if (res.status === 0) {
          // 调用 renderCategory 函数，重新渲染数据
          renderCategory();
        }
      }
    });
    layer.close(index); // 关闭窗口
  });
})


// ----------------------------   添加分类      -------------------------
let addIndex;
// 点击 添加类别 ，出现弹层
$('button:contains("添加")').on('click', function () {
  // console.log($('#tpl-add').html())
  addIndex = layer.open({
    type: 1,
    title: '添加类别',
    content: $('#tpl-add').html(),
    area: ['500px', '250px']
  });
})

// 添加的表单提交
$('body').on('submit', '#add-form', function (e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: '/my/category/add',
    data: $(this).serialize(),
    success: function (res) {
      layer.msg(res.message);
      if (res.status === 0) {
        renderCategory();
        // 关闭弹层
        layer.close(addIndex);
      }
    }
  })
})


// ----------------------------   编辑分类      -------------------------
let editIndex;
// 点击 编辑 ，出现弹层
$('tbody').on('click', 'button:contains("编辑")', function () {
  // 获取事件源的三个 data-xxx 属性值
  let data = $(this).data();
  // console.log(data); // {alias: "songci", name: "宋词", id: 121}
  editIndex = layer.open({
    type: 1,
    title: '编辑类别',
    content: $('#tpl-edit').html(),
    area: ['500px', '250px'],
    // success，它是layer弹层里面的一个方法，表示弹层成功后触发的函数
    success: function () {
      // 弹层成功后，执行什么代码，放到这里。
      // 我们要做的是数据回填，使用 form 模块快速数据回填
      let form = layui.form;
      form.val('category', data);
    }
  });
})


// 编辑表单提交
$('body').on('submit', '#edit-form', function (e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: '/my/category/update',
    data: $(this).serialize(),
    success: function (res) {
      layer.msg(res.message);
      if (res.status === 0) {
        renderCategory();
        layer.close(editIndex);
      }
    }
  })
})

